<template>
  <div id="sharedServices">
    <div class="row_01">
      <RateNew :info="rate_info01" />
      <RateNew :info="rate_info02" />
    </div>
    <div class="row_02">
      <div class="left">
        <Header title="共享服务数量和收入-按资源类型统计" />
        <div class="chart_box">
          <Chart id="chart_par" :message="optionsPar" />
        </div>
      </div>
      <div class="left">
        <Header title="共享服务数量和收入-按学科领域统计" />
        <div class="chart_box">
          <Chart id="chart_stack" :message="optionsStack" />
        </div>
      </div>
      <div>
        <Header title="共享服务考核情况-按年均有效工作机时排名" />
        <div class="table_box">
          <Table width="85%" :header="header" :list="list" />
        </div>
      </div>
    </div>
    <div class="row_03">
      <div class="right">
        <Header title="共享服务考核情况-按平均开放率和平均共享率统计" />
        <div class="chart_box">
          <Chart id="chart_line" :message="optionsLine" />
        </div>
      </div>
      <div class="left">
        <Header title="共享服务数量和收入-按大单位统计" />
        <div class="chart_box">
          <Chart id="chart_barAndLine" :message="optionsBarAndLine" />
        </div>
      </div>
      <div class="right">
        <Header title="共享服务数量和收入-按管理单位统计" />
        <div class="chart_box">
          <Chart id="chart_bar" :message="optionsBar" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Header from "./Header.vue";
import RateNew from "./RateNew.vue";
import Chart from "@/components/echart/charts.vue";
import Table from "./Table.vue";
export default {
  name: "SharedServices",
  components: {
    Header,
    RateNew,
    Chart,
    Table,
  },
  data() {
    return {
      header: [
        {
          colName: "rank",
          name: "名次",
          width: "20%",
        },
        {
          colName: "resourceName",
          name: "资源名称",
          width: "30%",
        },
        {
          colName: "range",
          name: "年均有效工作机时",
          width: "50%",
        },
      ],
      list: [
        {
          rank: 1,
          resourceName: "SBI试验装置",
          range: 8671,
        },
        {
          rank: 2,
          resourceName: "液相色谱仪",
          range: 7582,
        },
        {
          rank: 3,
          resourceName: "中国WeLink",
          range: 7461,
        },
        {
          rank: 4,
          resourceName: "TensorFlow",
          range: 7431,
        },
        {
          rank: 5,
          resourceName: "Theano",
          range: 6400,
        },
        {
          rank: 6,
          resourceName: "MongoDB",
          range: 6029,
        },
        {
          rank: 7,
          resourceName: "色谱联用仪",
          range: 5229,
        },
        {
          rank: 8,
          resourceName: "数字化扫描电子显微镜",
          range: 4896,
        },
        {
          rank: 9,
          resourceName: "VOC洁净温湿度环境箱",
          range: 3329,
        },
        {
          rank: 10,
          resourceName: "炸药毒品探测器",
          range: 2961,
        },
      ],
      rate_info01: {
        title: "共享服务总数",
        num: "15630",
        increase: "12",
        decrease: "12",
      },
      rate_info02: {
        title: "共享服务收入总额（万元）",
        num: "261820",
        increase: "12",
        decrease: "12",
      },
      optionsPar: {
        legend: {
          icon: "circle",
          orient: "vertical",
          left: "56%",
          top: "middle",

          formatter: function (name) {
            if (name === "共享服务数量") {
              return `{a|${name}}` + "{b|25%}";
            } else if (name === "科研设施") {
              return `{a|${name}}` + "{b|25%}";
            } else {
              return `{a|${name}}` + "{b|50%}";
            }
          },
          textStyle: {
            color: "#fff",
            rich: {
              a: {
                fontSize: 16,
                color: "#fff",
              },
              b: {
                fontSize: 16,
                color: "#fff",
                padding: [0, 7, 0, 7],
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            startAngle: 90,
            radius: ["45%", "55%"],
            center: ["35%", "50%"],
            color: ["#e16757", "#e3935d", "#eecb5f"],
            type: "pie",
            data: [
              { value: 25, name: "共享服务数量" },
              { value: 25, name: "科研设施" },
              { value: 50, name: "软件系统" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
          {
            startAngle: 90,
            radius: ["30%", "40%"],
            center: ["35%", "50%"],
            color: ["#85c8e5"],
            type: "pie",
            data: [{ value: 20, name: "共享收入" }],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
      },
      optionsStack: {
        legend: {
          icon: "circle",
          // orient: "vertical",
          top: "bottom",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          name: "学科领域",
          nameTextStyle: {
            color: "#fff ",
          },
          axisLabel: {
            color: "#fff",
            fontSize: 10,
            formatter: function (value) {
              var texts = value;
              if (texts.length > 4) {
                // 限制长度自设
                texts = texts.substr(0, 4) + "...";
              }
              return texts;
            },
          },
          grid: {
            left: "8%",
            right: "8%",
            top: "15%",
            bottom: "2%",
            containLabel: true,
          },
          type: "category",
          boundaryGap: false,
          data: [
            "材料学",
            "化学",
            "生物学",
            "基础医学",
            "环境科学",
            "药学",
            "电子与通信技术",
            "机械工作",
            "地球科学",
            "其他10类",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "共享服务数量",
            axisLabel: {
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: "#204F8C",
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
            nameTextStyle: {
              color: "#fff ",
            },
          },
          {
            type: "value",
            name: "共享服务收入",
            axisLabel: {
              color: "#B5C5D4",
            },
            nameTextStyle: {
              color: "#fff ",
            },
          },
        ],
        series: [
          {
            name: "共享服务数量",
            color: ["#41AAFF"],
            data: [10, 23, 20, 5, 23, 12, 45, 21, 14, 8],
            type: "line",
            smooth: true,
            areaStyle: {
              // 使用方法二的写法
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(58,189,255,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,189,255,0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            name: "共享服务收入",
            color: "#FFD100",
            data: [20, 22, 12, 14, 9, 20, 10, 14, 8, 14],
            type: "line",
            smooth: true,
            areaStyle: {
              // 使用方法二的写法
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(58,189,255,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(58,189,255,0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      },
      optionsLine: {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "8%",
          right: "8%",
          top: "15%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          name: "月份",
          nameTextStyle: {
            color: "#fff ",
          },
          type: "category",
          axisLabel: {
            color: "#fff",
            fontSize: 12,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          name: "百分比",
          type: "value",
          nameTextStyle: {
            color: "#fff ",
          },
          axisLabel: {
            color: "#B5C5D4",
          },
          splitLine: {
            lineStyle: {
              color: "#204F8C",
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
        },
        series: [
          {
            name: "平均开放率",
            color: ["#41AAFF"],
            data: [8, 20, 10, 12, 21, 15, 15, 13, 10, 22, 25, 13],
            type: "line",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FFF5B6" }, //开始的颜色
                { offset: 1, color: "#DFC338" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
          {
            name: "平均共享率",
            color: ["#a3da84"],
            data: [18, 12, 5, 9, 17, 13, 5, 8, 2, 7, 9, 36],
            type: "line",
          },
        ],
      },
      optionsBarAndLine: {
        legend: {
          icon: "circle",
          // orient: "vertical",
          top: "bottom",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "8%",
          right: "8%",
          top: "15%",
          bottom: "12%",
          containLabel: true,
        },
        xAxis: {
          name: "大单位",
          nameTextStyle: {
            color: "#fff ",
          },
          type: "category",
          axisLabel: {
            color: "#fff",
            fontSize: 12,
            formatter: function (value) {
              var texts = value;
              if (texts.length > 3) {
                // 限制长度自设
                texts = texts.substr(0, 3) + "...";
              }
              return texts;
            },
          },
          data: [
            "陆军研究院",
            "海军装备研究院",
            "空军装备研究院",
            "空军工程大学",
            "火箭军工程大学",
            // "火箭军装备研究院",
            // "军事科学院",
            // "国防大学",
            // "中国科学院",
          ],
        },
        yAxis: [
          {
            name: "服务数量（个数）",
            type: "value",
            nameTextStyle: {
              color: "#fff ",
            },
            axisLabel: {
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: "#204F8C",
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
            min: 0,
            max: 50,
            interval: 5,
          },
          {
            name: "服务收入（￥）",
            type: "value",
            nameTextStyle: {
              color: "#fff ",
            },
            axisLabel: {
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: "#204F8C",
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
            min: 0,
            max: 10,
            interval: 1,
          },
        ],
        series: [
          {
            name: "共享服务数量",
            color: ["#41AAFF"],
            data: [8, 20, 10, 12, 21, 15, 15, 13, 10],
            type: "bar",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0044c3" }, //开始的颜色
                { offset: 1, color: "#43ddff" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
          {
            name: "共享服务收入",
            color: ["#a3da84"],
            yAxisIndex: 1,
            data: [1, 2, 3, 4, 7, 6, 5, 8, 2],
            type: "line",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#96BAFF" }, //开始的颜色
                { offset: 1, color: "#3260F0" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
        ],
      },
      optionsBar: {
        legend: {
          icon: "circle",
          // orient: "vertical",
          top: "bottom",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          textStyle: {
            color: "#fff",
          },
          className: "LineChart-tooltip",
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 0.01rem solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 0.08rem 0px rgba(0, 0, 0, 0.3);
            border-radius: 0.04rem;`,
          formatter: function (params) {
            // console.log(params);
            var html = params[0].name + "<br/>";
            for (var i = 0; i < params.length; i++) {
              html +=
                params[i].marker +
                params[i].seriesName +
                "  " +
                params[i].value +
                "件" +
                "<br/>";
            }
            return html;
          },
        },
        grid: {
          left: "8%",
          right: "14%",
          top: "15%",
          bottom: "12%",
          containLabel: true,
        },
        xAxis: {
          name: "管理单位",
          nameTextStyle: {
            color: "#fff ",
          },
          type: "category",
          nameLocation: "end",
          axisLabel: {
            color: "#fff",
            fontSize: 10,
          },
          data: [
            "中国航天科技集团",
            "空军装备研究院",
            "华为技术有限公司",
            "麒麟软件有限公司",
            "陆军研究院",
            // "01/06",
            // "01/07",
            // "01/08",
            // "01/09",
            // "01/10",
            // "01/11",
            // "01/12",
            // "01/13",
            // "01/14",
            // "01/15",
            // "01/16",
            // "01/17",
          ],
        },
        yAxis: [
          {
            name: "服务数量",
            nameTextStyle: {
              color: "#fff ",
            },
            type: "value",
            axisLabel: {
              color: "#B5C5D4",
            },
            splitLine: {
              lineStyle: {
                color: "#204F8C",
                type: "dashed", //虚线
              },
              show: true, //隐藏
            },
          },
          {
            type: "value",
            name: "服务收入",
            nameTextStyle: {
              color: "#fff ",
            },
          },
        ],

        series: [
          {
            name: "共享服务数量",
            color: ["#61a5e8"],
            data: [
              10, 20, 5, 23, 12, 45, 21, 14, 8, 12, 4, 6, 9, 8, 12, 15, 17,
            ],
            type: "bar",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#96BAFF" }, //开始的颜色
                { offset: 1, color: "#3260F0" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
          {
            name: "共享服务收入",
            color: ["#7ecf51"],
            data: [12, 23, 7, 13, 22, 15, 11, 19, 28, 32, 24, 6, 9, 8, 2, 5, 7],
            type: "bar",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#9AFEA5" }, //开始的颜色
                { offset: 1, color: "#5AD8A6" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="less" scoped>
.chart_box {
  height: 80%;
}
.table_box {
  height: 80%;
  overflow: auto;
}
#sharedServices {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 50px calc((100vh - 156px) / 2) calc((100vh - 145px) / 2) 0;
  grid-gap: 10px;
  & > div {
    background: linear-gradient(180deg, #061234 0%, #093964 100%);
  }
  .row_01 {
    background: none;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    display: flex;
    & > div:nth-of-type(1) {
      margin-right: 15px;
    }
  }
  .row_02 {
    background: none;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    display: flex;
    & > div:nth-of-type(1) {
      margin-right: 15px;
    }
    & > div {
      width: calc(100% / 3);
      background: linear-gradient(180deg, #061234 0%, #093964 100%);
      // display: flex;
      // flex-direction: column;

      // .chart_box {
      //   flex: 1;
      // }
    }
    .left {
      margin-right: 15px;
    }
  }
  .row_03 {
    background: none;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    display: flex;
    & > div:nth-of-type(1) {
      margin-right: 15px;
    }
    & > div {
      width: 50%;
      background: linear-gradient(180deg, #061234 0%, #093964 100%);
      // display: flex;
      // flex-direction: column;

      // .chart_box {
      //   flex: 1;
      // }
    }
    .left {
      margin-right: 15px;
    }
  }
  .row_02_col_01 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: #f2f2f2;

    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
  .row_02_col_02 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: #f2f2f2;

    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
  .row_03_col_01 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    background-color: #f2f2f2;

    display: flex;
    flex-direction: column;
    .table_box {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .row_03_col_02 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    background-color: #f2f2f2;

    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
  .row_04 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    display: flex;
    justify-content: space-around;
    & > div {
      width: 50%;
      background: linear-gradient(180deg, #061234 0%, #093964 100%);
      display: flex;
      flex-direction: column;

      .chart_box {
        flex: 1;
      }
    }
    .left {
      margin-right: 15px;
    }
  }
}
.backStyle {
  background: linear-gradient(180deg, #061234 0%, #093964 100%);
}
</style>
